<template>
  <div id="userLoginView">
    <h2 style="margin-bottom: 16px">用户注册</h2>
    <a-form
        style="max-width: 480px; margin: 0 auto"
        label-align="left"
        auto-label-width
        @submit="userRegister"
    >
      <a-form-item field="userAccount" label="账号">
        <a-input placeholder="请输入账号" v-model="userRegisterRequest.userAccount"/>
      </a-form-item>
      <a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码">
        <a-input-password
            placeholder="请输入密码"
            v-model="userRegisterRequest.userPassword"
        />
      </a-form-item>
      <a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码">
        <a-input-password
            placeholder="请再次输入密码"
            v-model="userRegisterRequest.checkPassword"
        />
      </a-form-item>
      <a-form-item icon-align-center>
        <a-button html-type="submit" type="primary" style="width: 100%">
          注册
        </a-button>
      </a-form-item>
      <a-form-item icon-align-center>
        <a-button type="primary" style="width: 100%" @click="toLogin">
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {useRouter} from "vue-router";
import {userRegisterUsingPost} from "@/api/UserRequest";
import message from "@arco-design/web-vue/es/message";

const router = useRouter();

const userRegisterRequest = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
});

function toLogin(){
  router.push("/user/login");
}

async function userRegister(){
  var result = await userRegisterUsingPost(userRegisterRequest);
  if(result.data.code === 0) {
    message.success("注册成功，请重新登录！")
    router.push("/user/login");
  }else {
    message.error("登录失败，" + result.data.message);
  }
}
</script>